<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        input {
            width: 60%;
            height: 40px;
            border-radius: 10px;
            outline: none;
            border: solid 1px #cebbbb;
            text-indent: 1em;
            margin-top: 50px;
            margin-left: 20%;
        }

        button {
            width: 200px;
            height: 50px;
            background-color: #e2a7a7;
            margin: 25px 0 0 95px;
            border-radius: 20px;
            color: cornsilk;
            outline: none;
            border: none;
            cursor: pointer;
        }

        .login {
            width: 400px;
            height: 350px;
            margin: 100px auto;
            box-shadow: 0 0 2px 1px rgb(0, 0, 0, 20%);
            padding-top: 30px;
        }

        h4 {
            font-size: 26px;
            text-align: center;
            font-weight: 300;
            padding: 0;
        }

        .login-con {
            width: 80%;
            height: 50px;
            margin: 30px;
            border-bottom: 1px solid rgb(228 228 228);
            position: relative;
        }

        .login input {
            width: 80% !important;
            margin-top: 6px !important;
            border-radius: 0px !important;
            border: none;
            margin-left: 0 !important;
        }

        img {
            width: 25px;
            height: 25px;
            position: absolute;
            margin: 10px;
        }
        .p {
            padding: 0;
            font-size: 14px;
            color: red;
            text-align: center;
            display: none;
        }
    </style>
</head>

<body>
    <div class="login">
        <h4>京东登陆</h4>
        <div class="login-con">
            <input class="user" type="text" placeholder="请输入用户名" />
            <p class="p">请输入正确的用户名4-16位</p>
        </div>
        <div class="login-con">
            <input class="pwd" type="password" placeholder="请输入密码">
            <img type="1" src="./close.png">
            <p class="p">请输入正确的密码</p>
        </div>
        <button onclick="login()">登陆</button>
    </div>
    <script>
        let button = document.querySelector('#btn');
        let ipt = document.querySelector('input')
        let img = document.querySelector('img')
        let pwd = document.querySelector('.pwd')
        let user = document.querySelector('.user')
        let flag = 1;
        img.onclick = function () {
            if (flag == 1) {
                pwd.type = 'text'
                img.src = './open.png'
                flag = 0;
            } else {
                pwd.type = 'password';
                img.src = './close.png'
                flag = 1
            }
        }
        let obj =
        {
            username: 'ddd',
            password: '111111'
        }
        setItem('person', obj);
        function setItem(person, value) {
            localStorage.setItem(person, JSON.stringify(value))
        }
        function getItem(person) {
            return JSON.parse(localStorage.getItem(person))
        }
        let result = 1
        function login() {
            let sum = getItem('person');
            console.log(sum.length)
                let num = Object.values(sum);
            if (user.value !== num[0] && pwd.value !==num[1]) {
                        alert('输入用户名密码错误')
                    }else{
                        alert('跳转成功')
                    }
        }
    </script>
</body>

</html>